<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 导入头像图片
import avatar1 from '@/assets/home/avatar1.jpg';
import avatar2 from '@/assets/home/avatar2.jpg';
import avatar3 from '@/assets/home/avatar3.jpg';
import avatar4 from '@/assets/home/avatar4.jpg';
import avatar5 from '@/assets/home/avatar5.jpg';
import avatar6 from '@/assets/home/avatar6.jpg';

const isVisible = ref(false);
const sectionRef = ref(null);
const currentIndex = ref(0);
const isScrolling = ref(false);

const testimonials = [
  {
    id: 1,
    content: "An enim nullam tempor gravida donec enim congue magna at pretium purus pretium ligula rutrum luctus risusd diam eget risus varius blandit sit amet non magna.",
    name: "Jenny Wilson",
    title: "Web Developer"
  },
  {
    id: 2,
    content: "中国的美食丰富多样，从北方的面食到南方的米饭，每个地区都有独特的风味和特色。我特别喜欢川菜的麻辣口感和粤菜的鲜香。",
    name: "Michael Chen",
    title: "Food Blogger"
  },
  {
    id: 3,
    content: "在中国旅行期间，我惊叹于古代建筑与现代都市的完美结合。从北京的长城到上海的摩天大楼，处处充满了历史与未来的对话。",
    name: "Sophie Martin",
    title: "Travel Writer"
  }
];

const avatars = [
  {
    id: 1,
    image: avatar1,
    position: { top: '-40px', left: '10%' }
  },
  {
    id: 2,
    image: avatar2,
    position: { bottom: '100px', left: '5%' }
  },
  {
    id: 3,
    image: avatar3,
    position: { top: '100px', right: '15%' }
  },
  {
    id: 4,
    image: avatar4,
    position: { bottom: '-20px', right: '20%' }
  },
  {
    id: 5,
    image: avatar5,
    position: { top: '50%', left: '-20px' }
  },
  {
    id: 6,
    image: avatar6,
    position: { top: '30%', right: '-20px' }
  }
];

const handleScroll = (event) => {
  if (!isVisible.value || isScrolling.value) return;
  
  // 阻止默认滚动行为
  event.preventDefault();
  
  isScrolling.value = true;
  
  // 判断滚动方向
  if (event.deltaY > 0) {
    // 向下滚动
    if (currentIndex.value < testimonials.length - 1) {
      currentIndex.value++;
    } else {
      // 已经是最后一个卡片，允许页面滚动
      event.target.removeEventListener('wheel', handleScroll);
      return;
    }
  } else {
    // 向上滚动
    if (currentIndex.value > 0) {
      currentIndex.value--;
    } else {
      // 已经是第一个卡片，允许页面滚动
      event.target.removeEventListener('wheel', handleScroll);
      return;
    }
  }
  
  // 防抖，避免快速滚动导致卡片切换过快
  setTimeout(() => {
    isScrolling.value = false;
  }, 500);
};

const setSlide = (index) => {
  currentIndex.value = index;
};

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        isVisible.value = true;
        observer.disconnect();
        
        // 当组件可见时添加滚动事件监听
        if (sectionRef.value) {
          sectionRef.value.addEventListener('wheel', handleScroll, { passive: false });
        }
      }
    });
  }, { threshold: 0.2 });
  
  if (sectionRef.value) {
    observer.observe(sectionRef.value);
  }
});

onUnmounted(() => {
  if (sectionRef.value) {
    sectionRef.value.removeEventListener('wheel', handleScroll);
  }
});
</script>

<template>
  <section ref="sectionRef" class="testimonials-section">
    <div class="background-pattern"></div>
    <div class="background-gradient"></div>
    <div class="floating-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
    </div>
    <div class="testimonials-container">
      <div class="testimonials-header" :class="{ 'animate': isVisible }">
        <span class="subtitle">用户体验</span>
        <h2 class="title">相聚来华论坛，畅聊在华的那些事儿</h2>
      </div>
      
      <div class="testimonials-carousel" :class="{ 'animate': isVisible }">
        <div 
          v-for="avatar in avatars" 
          :key="avatar.id"
          class="avatar-circle"
          :style="{
            top: avatar.position.top || 'auto',
            left: avatar.position.left || 'auto',
            right: avatar.position.right || 'auto',
            bottom: avatar.position.bottom || 'auto',
            animationDelay: `${avatar.id * 0.5}s`
          }"
        >
          <img :src="avatar.image" :alt="'User avatar ' + avatar.id">
        </div>
        
        <div class="testimonial-cards-container">
          <div 
            v-for="(testimonial, index) in testimonials" 
            :key="testimonial.id"
            class="testimonial-card"
            :class="{ 
              'active': index === currentIndex,
              'prev': (index === currentIndex - 1) || (currentIndex === 0 && index === testimonials.length - 1),
              'next': (index === currentIndex + 1) || (currentIndex === testimonials.length - 1 && index === 0)
            }"
          >
            <div class="quote-icon-top">"</div>
            <div class="testimonial-content">
              <p>{{ testimonial.content }}</p>
            </div>
            
            <div class="testimonial-author">
              <div class="author-avatar">
                <img :src="avatar1" alt="Author avatar" v-if="index === 0">
                <img :src="avatar2" alt="Author avatar" v-if="index === 1">
                <img :src="avatar3" alt="Author avatar" v-if="index === 2">
              </div>
              <div class="author-info">
                <h3>{{ testimonial.name }}</h3>
                <p>{{ testimonial.title }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="testimonial-nav">
          <button class="nav-arrow prev" @click="setSlide(currentIndex > 0 ? currentIndex - 1 : testimonials.length - 1)">
            ←
          </button>
          <div class="nav-dots">
            <div 
              v-for="(testimonial, index) in testimonials" 
              :key="testimonial.id"
              class="nav-dot"
              :class="{ 'active': index === currentIndex }"
              @click="setSlide(index)"
            ></div>
          </div>
          <button class="nav-arrow next" @click="setSlide(currentIndex < testimonials.length - 1 ? currentIndex + 1 : 0)">
            →
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.testimonials-section {
  width: 100%;
  height: 854px;
  background-color: #f0f5fa;
  background-image: linear-gradient(135deg, #f0f5fa 0%, #f8f9fc 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 15%),
    radial-gradient(circle at 75% 75%, rgba(0, 195, 137, 0.05) 0%, rgba(0, 195, 137, 0) 20%);
  opacity: 0.6;
  z-index: 0;
}

.background-gradient {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(0, 195, 137, 0.08) 0%, rgba(0, 195, 137, 0.04) 30%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  transform: rotate(-10deg);
}

.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(0, 195, 137, 0.2), rgba(0, 195, 137, 0.05));
  backdrop-filter: blur(2px);
  opacity: 0.3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.shape-1 {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 5%;
  animation: float-shape 20s infinite ease-in-out;
}

.shape-2 {
  width: 120px;
  height: 120px;
  top: 75%;
  left: 8%;
  animation: float-shape 15s infinite ease-in-out reverse;
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 20%;
  right: 10%;
  animation: float-shape 18s infinite ease-in-out 2s;
}

.shape-4 {
  width: 100px;
  height: 100px;
  top: 60%;
  right: 5%;
  animation: float-shape 12s infinite ease-in-out 1s;
}

.shape-5 {
  width: 200px;
  height: 200px;
  bottom: -5%;
  right: 40%;
  animation: float-shape 25s infinite ease-in-out 3s;
}

@keyframes float-shape {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(-10px, 10px) rotate(3deg) scale(1.05);
  }
  40% {
    transform: translate(15px, -5px) rotate(-2deg) scale(0.95);
  }
  60% {
    transform: translate(-5px, -15px) rotate(4deg) scale(1.02);
  }
  80% {
    transform: translate(10px, 5px) rotate(-3deg) scale(0.98);
  }
}

.testimonials-container {
  max-width: 1600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.testimonials-header.animate {
  opacity: 1;
  transform: translateY(0);
}

.subtitle {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  color: #00c389;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 5px 20px;
  border-radius: 30px;
  background: rgba(0, 195, 137, 0.1);
}

.title {
  font-size: 2.5rem;
  color: #2a2d32;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(120deg, #2a2d32, #4a5568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.testimonials-carousel {
  width: 100%;
  max-width: 1000px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease 0.3s;
}

.testimonials-carousel.animate {
  opacity: 1;
  transform: translateY(0);
}

.avatar-circle {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 6;
  animation: float 6s ease-in-out infinite;
  transition: transform 0.3s ease;
  cursor: pointer;
  border: 3px solid white;
}

.avatar-circle::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle at center, rgba(0, 195, 137, 0.2) 0%, rgba(0, 195, 137, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-circle:hover::before {
  opacity: 1;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar-circle:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.avatar-circle:hover img {
  transform: scale(1.1);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

.testimonial-cards-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 320px;
  margin: 0 auto;
  perspective: 1200px;
  z-index: 20;
}

.testimonial-card {
  background: linear-gradient(145deg, #ffffff, #f9f9f9);
  border-radius: 24px;
  padding: 50px 40px 40px;
  width: 100%;
  max-width: 800px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  z-index: 0;
  transform: translateY(40px) scale(0.9);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 24px;
  z-index: -1;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 7;
  pointer-events: auto;
}

.testimonial-card.prev {
  opacity: 0.5;
  transform: translateX(-5%) translateY(-20px) scale(0.95) rotateY(-5deg);
  z-index: 2;
  filter: blur(2px);
}

.testimonial-card.next {
  opacity: 0.3;
  transform: translateX(5%) translateY(60px) scale(0.9) rotateY(5deg);
  z-index: 1;
  filter: blur(4px);
}

.quote-icon-top {
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 5rem;
  color: rgba(0, 195, 137, 0.1);
  font-family: 'Georgia', serif;
  line-height: 0.5;
}

.testimonial-content {
  margin-bottom: 30px;
  position: relative;
}

.testimonial-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #4a5568;
  margin: 0;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 20px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid white;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  flex: 1;
}

.author-info h3 {
  font-size: 1.2rem;
  color: #2d3748;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.author-info p {
  font-size: 0.95rem;
  color: #00c389;
  margin: 0;
  font-weight: 500;
}

.testimonial-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
  position: relative;
  z-index: 10;
}

.nav-dots {
  display: flex;
  gap: 12px;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e2e8f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-dot.active {
  background-color: #00c389;
  transform: scale(1.2);
}

.nav-dot:hover {
  background-color: #00c389;
  transform: scale(1.1);
}

.nav-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  color: #4a5568;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-arrow:hover {
  background-color: #00c389;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .testimonials-section {
    height: auto;
    padding: 80px 40px;
  }
  
  .title {
    font-size: 2.2rem;
  }
  
  .testimonial-card {
    max-width: 700px;
    padding: 40px 35px 35px;
  }
}

@media (max-width: 992px) {
  .testimonials-section {
    padding: 60px 30px;
  }
  
  .subtitle {
    font-size: 1.1rem;
  }
  
  .title {
    font-size: 1.8rem;
  }
  
  .testimonial-content p {
    font-size: 1.1rem;
  }
  
  .avatar-circle {
    width: 50px;
    height: 50px;
  }
  
  .testimonial-cards-container {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 50px 20px;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .title {
    font-size: 1.6rem;
  }
  
  .testimonial-card {
    padding: 30px 25px 25px;
  }
  
  .testimonial-content p {
    font-size: 1rem;
  }
  
  .author-info h3 {
    font-size: 1.1rem;
  }
  
  .avatar-circle:nth-child(odd) {
    display: none;
  }
  
  .testimonial-cards-container {
    height: 400px;
  }
  
  .quote-icon-top {
    font-size: 4rem;
  }
}

@media (max-width: 576px) {
  .testimonials-section {
    padding: 40px 15px;
  }
  
  .testimonial-card {
    padding: 25px 20px 20px;
  }
  
  .testimonial-cards-container {
    height: 450px;
  }
  
  .avatar-circle {
    width: 40px;
    height: 40px;
  }
  
  .nav-arrow {
    width: 35px;
    height: 35px;
  }
}
</style> 